<template>
    <div class="plr20">
        <div class="p20 table-striped">
            <el-button
                class="pb20"
                type="primary"
                icon="el-icon-plus"
                size="mini"
                v-hasPermi="['system:post:add']"
                @click="showAddDialog"
                >新增</el-button
            >
            <div>
                <el-table :data="list">
                    <el-table-column
                        type="selection"
                        width="55"
                        align="center"
                    />
                    <el-table-column
                        label="发生时间"
                        align="center"
                        prop="addTime"
                    />
                    <el-table-column
                        label="事件类别"
                        align="center"
                        prop="eventType"
                    />
                    <el-table-column
                        label="本次积分"
                        align="center"
                        prop="score"
                    />
                    <el-table-column
                        label="事件描述"
                        align="center"
                        prop="eventDesc"
                    />
                    <el-table-column
                        label="操作"
                        align="center"
                        class-name="small-padding fixed-width"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:post:edit']"
                                >编辑</el-button
                            >
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="deleteRecordInfo(scope.row.id)"
                                v-hasPermi="['system:post:remove']"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="pageNum"
                    :limit.sync="pageSize"
                    @pagination="getRecordInfo"
                />
            </div>
        </div>
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="630px"
            append-to-body
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="130px"
            >
                <el-form-item label="发生时间" prop="addTime">
                    <el-date-picker
                        v-model="form.addTime"
                        style="width:100%;"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="事件类别">
                    <el-select style="width:100%;" v-model="form.eventType">
                        <el-option
                            v-for="dict in eventTypeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="本次积分">
                    <el-select style="width:100%;" v-model="form.score">
                        <el-option
                            v-for="num in 10"
                            :key="num"
                            :label="num"
                            :value="num"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="事件描述">
                    <el-input
                        v-model="form.eventDesc"
                        type="textarea"
                        placeholder="请输入事件描述"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('form')"
                    >确 定</el-button
                >
                <el-button @click="open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { recordInfo, addRecordInfo, deleteRecordInfo, modifiRecordInfo } from '@/api/users'
export default {
    name: 'creditInfo',
    data () {
        return {
            title: '',
            open: false,
            form: {
                userId: '',
                addTime: '',
                eventType: '',
                score: '',
                eventDesc: ''
            },
            rules: {
                addTime: [
                    { required: true, message: "请选择发生时间", trigger: "blur" }
                ]
            },
            list: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            eventTypeOptions: [],
            isAddUserPost: true // 是新增还是修改
        }
    },
    created () {
        this.form.userId = this.$route.params.id
        this.getDicts("event_type").then(response => {
            this.eventTypeOptions = response.data;
        });
        this.getRecordInfo()
    },
    methods: {
        showAddDialog () {
            this.title = "添加诚信信息"
            this.open = true
            this.isAddUserPost = true
            this.form = {
                userId: this.$route.params.id,
                addTime: '',
                eventType: '',
                score: '',
                eventDesc: ''
            }
        },
        handleUpdate (row) {
            this.title = "编辑诚信信息"
            this.open = true
            this.isAddUserPost = false
            this.form = JSON.parse(JSON.stringify(row))
        },
        eventTypeFormatter (row) {
            let eventType = row.eventType
            for (let i = 0; i < this.eventTypeOptions.length; i++) {
                if (eventType == this.eventTypeOptions[i].dictLabel) {
                    return this.eventTypeOptions[i].dictValue
                }
            }
            return eventType
        },
        async getRecordInfo () {
            let res = await recordInfo({ userId: this.$route.params.id })
            if (res.code == 200) {
                this.list = res.rows
                this.total = res.total
            }
        },
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.isAddUserPost) {
                        this.addRecordInfo()
                    } else {
                        this.modifiRecordInfo()
                    }
                } else {
                    return false;
                }
            });
        },
        async addRecordInfo () {
            let res = await addRecordInfo(this.form)
            if (res.code == 200) {
                this.open = false
                this.$message({
                    message: '新增成功',
                    type: 'success'
                })
                this.getRecordInfo()
            }
        },
        async deleteRecordInfo (id) {
            let res = await deleteRecordInfo(id)
            if (res.code == 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                this.getRecordInfo()
            }
        },
        async modifiRecordInfo () {
            this.form.eventType = this.eventTypeFormatter(this.form)
            let res = await modifiRecordInfo(this.form)
            if (res.code == 200) {
                this.open = false
                this.$message({
                    message: '修改成功',
                    type: 'success'
                })
                this.getRecordInfo()
            }
        }
    }
}
</script>
<style scoped>
.plr20 {
    padding: 0 20px;
}
.p20 {
    padding: 20px;
}
.pb20 {
    margin-bottom: 20px;
}
.table-striped {
    width: 100%;
    background: #fff;
    border-radius: 6px;
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 13px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
</style>